<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart Icon</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<style>
  .shopping-cart {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-bottom: 10px;
  }

  .shopping-cart i {
    font-size: 24px; /* 图标大小 */
    color: rgb(239, 43, 43); /* 图标颜色 */
  }

  .shopping-cart::before {
    content: attr(data-count); /* 使用自定义属性来显示数量 */
    position: absolute;
    top: -10px; /* 调整位置，使其出现在图标上方 */
    right: -10px; /* 调整位置，使其出现在图标右侧 */
    background-color: red; /* 数量背景颜色 */
    color: white; /* 数量文本颜色 */
    border-radius: 50%; /* 使背景成为圆形 */
    width: 20px; /* 数量显示区域的宽度 */
    height: 20px; /* 数量显示区域的高度 */
    font-size: 12px; /* 数量文本大小 */
    line-height: 20px; /* 垂直居中数量文本 */
    text-align: center; /* 水平居中数量文本 */
    transform: translate(50%, -50%); /* 居中对齐 */
  }
  p{
    color: red;

  }
</style>
</head>
<body>

<div class="shopping-cart" data-count="14"> <!-- 使用data-count属性来设置数量 -->
  <i class="fas fa-shopping-cart"></i> <!-- Font Awesome购物车图标 -->
  <p>我的购物车</p>
</div>

</body>
</html>